// import TableFilterMixin from '@/mixins/TableFilterMixin'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import PreviewVideoDialog from './PreviewVideoDialog'
import { Button } from 'ant-design-vue'
import { ZoomInOutlined } from '@ant-design/icons-vue'

@Component
export class PlayVideoView extends Render {
    @Prop() show!: boolean
    @Prop() src!: string | string[]

    showDialog = false

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }
    @Watch('show')
    handleWatchShow() {
        this.showDialog = this.show
    }

    @Watch('showDialog')
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
    }

    get srcList() {
        return Array.isArray(this.src) ? this.src : [this.src]
    }

    onShowDialog() {
        this.showDialog = true
    }

    render() {
        return (
            <>
                {this.src?.length ? <div class="cursor-pointer underline underline-offset-4px" onClick={this.onShowDialog}>
                    点击查看
                    <ZoomInOutlined class="ml-4px" />
                </div> : '--'}
                <PreviewVideoDialog v-model:show={this.showDialog} src={this.srcList} />
            </>
        )
    }
}

export default toNative<{ src: string | string[] }, {}>(PlayVideoView)
